<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reservation Form</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./ICR_style.css">


<body>
    <div class="box">
        <div class="leftBox"></div>
        <div class="rightBox"></div>
        <div class="main">
            <header>
                <div class="hImg"><img src="./img/logo (1).png" alt=""></div>
                <div class="hTitle">
                    <h2>ICR</h2>
                    <h3>International Cuisine Restaurant</h3>
                </div>

            </header>
            <nav>
                <a class="nav_a" href="./index.html">Home</a>
                <a class="nav_a" href="./Menu_details.html">Menu_details</a>
                <a class="nav_a" href="./Booking_info.html">Reservation Form</a>
                <a class="nav_a" href="./Contact_Details.html">Contact_Details</a>
                <a class="nav_a" href="./Gallery.html">Gallery</a>
            </nav>
            <div style="display: flex;">
                <!-- 框架版本下拉框 -->
                <!-- <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown Menu
                </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="./index.html">Home</a></li>
                        <li><a class="dropdown-item" href="./Menu_details.html">Menu_details</a></li>
                        <li><a class="dropdown-item" href="./Booking_info.html">Reservation Form</a></li>
                    </ul>
                </div> -->

                <!-- 原生下拉框 -->
                <select name="limit" id="select" onchange="getvalue(this.options[this.options.selectedIndex].value)">
                <option value ="">Dropdown Menu</option>
                <option value ="Home">Home</option>
                <option value ="Menu_details">Menu_details</option>
                <option value="Reservation Form">Reservation Form</option>
                <option value="Contact_Details">Contact_Details</option>
                <option value="Gallery">Gallery</option>
              </select>
            </div>

            <hr>
            <div class="bookInfo">
                <div class="bookInfoTitle">
                    <h1>Reservation Form</h1>
                    <p>Please fill the form below accurately to enable us serve you better... welcome!</p>
                </div>

                <hr>
                <form class="row g-3" id="formId">
                    <div class="col-2" style="line-height: 38px;">Full Name：</div>
                    <div class="col-5">
                        <input type="text" class="form-control" placeholder="First name" aria-label="First name">
                    </div>
                    <div class="col-5">
                        <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
                    </div>
                    <div class="col-2" style="line-height: 38px;">E-mail：</div>
                    <div class="col-10">
                        <input type="email" class="form-control" id="inputEmail4" placeholder="ex:myname@example.com">
                    </div>
                    <div class="col-2" style="line-height: 38px;">Phone：</div>
                    <div class="col-10">
                        <input type="phone" class="form-control" id="inputEmail4">
                    </div>
                    <div class="col-2" style="line-height: 38px;">Number of Guest：</div>
                    <div class="col-10">
                        <input type="number" class="form-control" min="1" max="10" id="inputEmail4">
                    </div>
                    <div class="col-2" style="line-height: 38px;">Date：</div>
                    <div class="col-10">
                        <input type="date" class="form-control" id="inputEmail4">
                    </div>
                    <div class="col-2" style="line-height: 38px;">Time：</div>
                    <div class="col-10">
                        <input type="time" class="form-control" id="inputEmail4">
                    </div>

                    <div class="col-2" style="line-height: 38px;">Tabel Reservation：</div>
                    <div class="col-10" style="line-height: 37px;">
                        <select name="" id="">
                            <option value ="">Tabel Reservation</option>
                            <option value ="1">1</option>
                            <option value ="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>


                    <div class="col-2" style="line-height: 38px;"> Reservation Type：</div>
                    <div class="col-10" style="line-height: 38px;">
                        <select name="" id="" style="line-height: 37px;">
                            <option value =""> Reservation Type</option>
                            <option value ="grace">grace</option>
                            <option value ="classical">classical</option>
                            <option value="luxury">luxury</option>
                        </select>
                    </div>

                    <div class="col-12">
                        <input type="text" placeholder="If Other above,please specify?" class="form-control" id="inputEmail4">
                    </div>
                    <div class="input-group col-12">
                        <span class="input-group-text">Any Special Request？</span>
                        <textarea class="form-control" aria-label="With textarea"></textarea>
                    </div>
                    <!-- data-bs-toggle="modal" data-bs-target="#myModal" -->
                    <div class="col-12" style="text-align: center;"><button type="button" onclick="confirm()" class="btn btn-success">confirm</button></div>
                </form>
            </div>
            <hr>
            <footer>
                <div class="fText">
                    <span>Copyright © 2021 二姨  </span>
                </div>
            </footer>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Your Reservation</h5>
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-5">Full Name:</div>
                            <div class="col-7" id="Full Name"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">E-mail:</div>
                            <div class="col-7" id="E-mail"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Phone:</div>
                            <div class="col-7" id="Phone"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Number of Guest：</div>
                            <div class="col-7" id="NumberGuest"></div>
                        </div>

                        <div class="row">
                            <div class="col-5">Date：</div>
                            <div class="col-7" id="Date"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Time：</div>
                            <div class="col-7" id="Time"></div>
                        </div>

                        <div class="row">
                            <div class="col-5">Tabel Reservation：</div>
                            <div class="col-7" id="TabelReservation"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Reservation Type：</div>
                            <div class="col-7" id="ReservationType"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Other above：</div>
                            <div class="col-7" id="above"></div>
                        </div>
                        <div class="row">
                            <div class="col-5">Special Request：</div>
                            <div class="col-7" id="SpecialRequest"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="close()">Close</button> -->
                    <button type="button" class="btn btn-primary" onclick="submit()">submit</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./ICR.js"></script>

</html>